<template>
  <li class="displayFlex">
    <div class="displayFlex alignCenter">
      <div class="img-box">
        <img :src="item.newsPic" alt="" />
      </div>
      <div class="content flex1">
        <h6 class="font16">{{ item.newsTitle }}</h6>
        <p class="font14 grey">{{ item.content }}</p>
      </div>
    </div>
  </li>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      data: () => ({}),
    },
  },
  data() {
    return {};
  },
  methods: {
    goPage(id) {
      console.log("aaaa");
      this.$router.push({
        path: "/information/detail",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>
<style scoped>
li {
  margin-bottom: 10px;
  background: #f8f8f8;
  padding-right: 10px;
  box-sizing: border-box;
}
.img-box {
  width: 180px;
  height: 101px;
  overflow: hidden;
  background: #ccc;
  margin-right: 10px;
}
.img-box img {
  display: block;
  width: 100%;
}
.content h6 {
  margin: 0;
  margin-bottom: 6px;
  font-weight: normal;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.content p {
  margin: 0;
  line-height: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>
